<template>
  <div class="status-bar">
    <a-space>
      <span>缩放: {{ (currentZoom * 100).toFixed(0) }}%</span>
      <span>选中: {{ selectedCount }} 个元素</span>
      <span v-if="canUndo" style="color: #52c41a; font-weight: 500;">
        <a-icon type="undo" /> 可撤销
      </span>
      <span v-if="canRedo" style="color: #fa8c16; font-weight: 500;">
        <a-icon type="redo" /> 可重做
      </span>
      <span v-if="isDragging" style="color: #1890ff; font-weight: 500;">
        正在拖拽: {{ dragType }} - 拖拽到画布上放置
      </span>
    </a-space>
  </div>
</template>

<script>
export default {
  name: 'StatusBar',
  props: {
    currentZoom: {
      type: Number,
      default: 1
    },
    selectedCount: {
      type: Number,
      default: 0
    },
    isDragging: {
      type: Boolean,
      default: false
    },
    dragType: {
      type: String,
      default: ''
    },
    canUndo: {
      type: Boolean,
      default: false
    },
    canRedo: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.status-bar {
  background: #f5f5f5;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #666;
}

.status-bar span {
  font-weight: 500;
  color: #1890ff;
}
</style> 